<template >    
    <div class="menu-tree">
        <div class="menu-item" v-for="(item,index1) in menu" :key="index1">
            <div class="menu-label" :class="[getLabelClass(item), currentRoutePath===item.path?'active':'']" 
            :style="{'padding-left': item.level*15 + 'px'}"
            @click="clickMenuItem(item)">{{item.label}}</div>
            <div class="menu-children" v-if="item.children && item.expand">
                <MenuTree :menu="item.children"></MenuTree>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    components: {
        MenuTree: ()=>import('./MenuTree')
    },
    props: {
        menu:{
            type: Array,
            required: true
        }
    },
    data(){
        return {
            currentRoutePath: this.$route.path
        }
    },
    mounted(){

    },
    watch:{
        '$route.path'(route,oldRoute){
            this.currentRoutePath = route
        }
    },
    methods:{
        getLabelClass(menu){
            const res = {
                'parent-menu': false,
                'child-menu': false,
            }
            if(menu.children){
                res['parent-menu'] = true
            }else{
                res['child-menu'] = true
            }
            return res
        },
        clickMenuItem(menu){
            if(menu.children){
                menu.expand = !menu.expand
            }else{
                if(menu.path){
                    this.$router.push(menu.path)
                }
            }
        }
    }
}
</script>

<style lang="scss">
.menu-tree{
    
}
</style>

<style lang="scss" scoped>
.menu-tree{
    .menu-item{
        
    }
    .menu-label{
        height: 40px;
        padding-left: 10px;
        line-height: 40px;
        cursor: pointer;
        user-select: none;
        &:hover,&.active{
            background-color: #C6CAD0;
        }
        &.parent-menu{
            font-weight: bold;
        }
    }
    .menu-children{

    }
    
}
</style>
